class wtSwiper{
       constructor(selector,imgList){
         var swiperDiv = document.querySelector(selector);

       function createSwiperHtml(imgList){
        var imgListDiv = document.createElement("div");
        var circleListDiv = document.createElement("div");
        imgListDiv.className = 'imgList';
        circleListDiv.className = 'circleList';
        imgList.forEach(function(item,i){
        if(i == 0){
            imgListDiv.innerHTML = imgListDiv.innerHTML + '<div class="imgItem active" style="background-image: url('+item+');"></div>';
            circleListDiv.innerHTML = circleListDiv.innerHTML +'<div id="c'+i+'" class="circleItem active"></div>'
            }else
            {
            imgListDiv.innerHTML = imgListDiv.innerHTML + '<div class="imgItem" style="background-image: url('+item+');"></div>';
            circleListDiv.innerHTML = circleListDiv.innerHTML +'<div id="c'+i+'" class="circleItem"></div>'
            }
        });
        swiperDiv.appendChild(imgListDiv);
        swiperDiv.appendChild(circleListDiv);
        swiperDiv.innerHTML += `<div class="btnList">
                <div class="btn pre"><</div>
                <div class="btn next">></div>
            </div>`;
    };
        createSwiperHtml(imgList);
    
         this.imgListDivs = document.querySelectorAll(selector+" .imgItem");
         this.btnNext = document.querySelector(selector+" .next");
         this.btnPre = document.querySelector(selector+" .pre");
         this.circleListDivs = document.querySelectorAll(selector+" .circleItem");
         this.currentImg = 0;
         var that = this;
         //console.log(this.imgListDivs);
          this.btnNext.onclick = function () {
                    that.next();
                }
          this.btnPre.onclick = function () {
                    that.pre();
                    }
          this.circleListDivs.forEach(function(item,i){
                    item.onclick = function(){
                        that.go(i);
                    }
                });
       }
            
            renderImg(){
                    this.imgListDivs.forEach(function(item,i){
                        item.classList.remove("active");
                    });
                    this.circleListDivs.forEach(function (item, i) {
                        item.classList.remove("active");
                    })
                    this.imgListDivs[this.currentImg].classList.add("active");
                    this.circleListDivs[this.currentImg].classList.add("active");
                };

               
               next(){
                    this.currentImg = this.currentImg +1;
                    if(this.currentImg > this.imgListDivs.length - 1){
                        this.currentImg = 0;
                    };
                    this.renderImg();
                };


               
               pre(){
                    this.currentImg = this.currentImg - 1;
                        if (this.currentImg < 0) {
                            this.currentImg = this.imgListDivs.length - 1;
                        };
                        this.renderImg();
                };
               
               go(i){
                    
                        this.currentImg = i;
                        this.renderImg();
                
                }


}
